<template>
	<view class="s-data-panel">
		<text class="top-title">推送平台</text>
		<view class="data-grid">
			<view
					v-for="(item, index) in bindingData"
					:key="item.label"
					:style="{ backgroundColor: item.isBound ? item.color : '#d9d9d9' }"
					class="data-item"
					@tap="handleBinding(item.type)"
			>
				<image
						:src="item.icon"
						class="data-icon"
						:style="{ opacity: item.isBound ? 1 : 0.5 }"
						mode="widthFix"
				/>
				<view class="status">{{ item.isBound ? '已绑定' : '未绑定' }}</view>
				<view class="label">{{ item.label }}</view>
			</view>
		</view>

		<su-dialog ref="suDialogRef"
		           :show="state.showDialog"
		           :showBottom="false"
		           @close="state.showDialog = false">
			<view class="ss-flex-col ss-p-20">
				<view v-if="state.dialogType === 'mp'" class="modal-content content_box">
					<view style="color: black; font-weight: bold; margin-bottom: 40rpx">长按图片识别二维码关注公众号</view>
					<image show-menu-by-longpress="true" :src="state.mpInfo.img" class="mp-img" style="width: 100% !important;" mode="widthFix"/>
					<view style="color: black; font-weight: bold; margin-bottom: 40rpx; margin-top: 40rpx">点击公众号菜单【获取绑定码】粘贴到此处即可完成绑定</view>
					<uni-easyinput
							placeholder="请输入公众号绑定码"
							v-model="state.model.accountOpenId"
							:inputBorder="false"
					>
					</uni-easyinput>
					<button class="generic-btn" @tap="onBindAccount">
						<text class="btn-text">立即绑定</text>
					</button>
				</view>
				<view v-else-if="state.dialogType === 'corp'" class="modal-content content_box">
					<view style="color: black; font-weight: bold; margin-bottom: 40rpx">
						长按图片识别二维码关注企业微信
						<br>
						<text style="color: red">*若提示过期点击联系IM即可</text>
					</view>
					<image show-menu-by-longpress="true" :src="state.corpInfo.img" class="mp-img" style="width: 100% !important;" mode="widthFix"/>
					<view style="color: black; font-weight: bold; margin-bottom: 40rpx; margin-top: 40rpx">
						<text style="color: red">关注后一定要点击带有IM头像的会话</text>
						<br>
						发送消息绑定即可触发绑定引导
					</view>
					<uni-easyinput
							placeholder="请输入企业微信绑定码"
							v-model="state.model.corpWechatUserId"
							:inputBorder="false"
					>
					</uni-easyinput>
					<button class="generic-btn" @tap="onBindCorp">
						<text class="btn-text">立即绑定</text>
					</button>
				</view>
			</view>
		</su-dialog>
	</view>
</template>

<script setup>
import {reactive, ref} from 'vue';
import sheep from '@/sheep';
import {onLoad, onShow} from "@dcloudio/uni-app";

const state = reactive({
	showDialog: false,
	dialogType: 'mp',
	mpInfo: {
		img: "https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/02/0927094a24dc0344959c79827f1f0d62bdgreen.png"
	},
	corpInfo: {
		img: ""
	},
	model: {
		accountOpenId: "",
		corpWechatUserId: ""
	}
})

// 模拟绑定数据
const bindingData = ref([
	{
		label: '微信公众号',
		isBound: true,
		type: 'mp',
		color: '#52c41a', // 微信绿色
		icon: 'https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/02/090b2a6122f3514f26938025c2ca562b14公众号 (1).png'
	},
	{
		label: '企业微信',
		isBound: false,
		type: 'corp',
		color: '#1890ff', // 企业微信蓝色
		icon: 'https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/02/189a1fec29152347d891e79ce6e0cb69da企业微信 (1).png'
	},
	/*
	{
		label: '邮箱(暂未开放)',
		isBound: false,
		color: '#ff4d4f', // 邮箱红色
	},
	{
		label: '电报(暂未开放)',
		isBound: false,
		color: '#9b59b6', // 电报紫色
	}*/
]);

// 点击事件：模拟绑定/解绑逻辑
const handleBinding = (type) => {
	state.dialogType = type
	state.showDialog = true;
};

async function init() {
	// 查询是否绑定公众号推送提醒
	const res = await sheep.$api.user.profile();
	const corpQrcode = await sheep.$api.dict.getDict('corp_wechat_qrcode', 'value');
	if (!sheep.$helper.isRealEmpty(corpQrcode)) {
		state.corpInfo.img = corpQrcode.data
	}
	console.log(res, '-----------------userInfo')
	// 微信公众号必须绑定
	if (sheep.$helper.isRealEmpty(res.openId)) {
		// 未绑定
		bindingData.value[0].isBound = false;
		// 确认提示框
		uni.showModal({
			title: '提示',
			content: '您还未绑定微信公众号，是否立即绑定？',
			showCancel: false,
			success: (res) => {
				// 确认绑定
				handleBinding('mp');
			}
		});
	} else {
		// 已绑定
		bindingData.value[0].isBound = true;
	}
	// 企业微信较弱提示
	if (sheep.$helper.isRealEmpty(res.corpid)) {
		// 未绑定
		bindingData.value[1].isBound = false;
	} else {
		// 已绑定
		bindingData.value[1].isBound = true;
	}
}

function onBindAccount() {
	console.log(state.model.accountOpenId, '-----------------accountOpenId')
	if (sheep.$helper.isRealEmpty(state.model.accountOpenId)) {
		sheep.$helper.toast('请输入公众号绑定码');
		return;
	}
	// 请求绑定
	sheep.$api.user.mpBind(state.model).then(res => {
		sheep.$helper.toast('绑定成功');
		uni.reLaunch({
			url: '/pages/index/user'
		});
	});
}

function onBindCorp() {
	console.log(state.model.corpWechatUserId, '-----------------corpid')
	if (sheep.$helper.isRealEmpty(state.model.corpWechatUserId)) {
		sheep.$helper.toast('请输入企业微信绑定码');
		return;
	}
	// 请求绑定
	sheep.$api.user.corpBind(state.model).then(res => {
		sheep.$helper.toast('绑定成功');
		uni.reLaunch({
			url: '/pages/index/user'
		});
	});
}

onLoad(async () => {
	await init();
});

onShow(async () => {
	await init();
});
</script>

<style lang="scss" scoped>
.s-data-panel {
	background: #3E3A39;
	border-radius: 24rpx;
	padding: 32rpx;
	box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.2);
	color: #fff;
	margin-bottom: 20rpx;

	.data-grid {
		margin-top: 30rpx;
		display: grid;
		grid-template-columns: repeat(2, 1fr); /* 四列，保证整齐 */
		gap: 20rpx; /* 卡片间距 */
		justify-items: center; /* 居中对齐 */
	}

	.data-item {
		width: 86%;
		height: 150rpx;
		border-radius: 16rpx;
		padding: 20rpx;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		transition: all 0.3s ease;

		&:hover {
			transform: scale(1.05); /* 放大 */
		}

		.data-icon {
			width: 60rpx;
			height: 60rpx;
			margin-bottom: 12rpx;
		}

		.status {
			font-size: 28rpx;
			font-weight: 700;
			color: #fff;
			margin-bottom: 8rpx;
		}

		.label {
			font-size: 24rpx;
			font-weight: bold;
			color: rgba(255, 255, 255, 0.8);
		}
	}
}

.top-title {
	margin-bottom: 40rpx;
	font-weight: bold;
	font-size: 30rpx
}

.generic-btn {
	margin-top: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 24rpx;
	padding: 5rpx;
	background: linear-gradient(to right, #3E3A39, #3E3A39, #3E3A39);
	box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.2);
	animation: fadeInUp 0.5s ease-out both;
	color: #ffffff;
	font-weight: bold;
	font-size: 30rpx;
}
</style>
